<template>
    <div>
        <tabbar :msg="'/product'"></tabbar>
        <!-- 轮播图 -->
        <div style="padding-top: 50px;">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <div class="swipe-item bg1">
                        <div class="bg1-text">
                            线上、线下场景全覆盖，
                            <br>
                            随时随地满足商家多样化经营需求
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="swipe-item bg2">
                        <div class="bg2-text">
                            0元先享 信用服务
                            <br>
                            免息分期 减小压力
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="swipe-item bg3">
                        <div class="bg3-text">
                            安全稳定 合法合规
                            <!-- <br> -->
                            <div>为客户提供可靠、合规的服务体验</div>
                        </div>

                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 支付产品 -->
        <div class="core_box">
            <div class="title">支付产品</div>
            <div class="core_li">
                <van-swipe class="my-swipes" :autoplay="3000" indicator-color="#006FBC">
                    <van-swipe-item>
                        <van-row gutter="13">
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon1.png" alt=""> -->
                                    <div class="core_title">先享后付</div>
                                    <div class="core_desc">
                                        凭信用先体验商品服务，再按约定期限付款
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon2.png" alt=""> -->
                                    <div class="core_title">先享免押</div>
                                    <div class="core_desc">依信用评估免押金，先使用商品或服务
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon3.png" alt=""> -->
                                    <div class="core_title">商家扣款</div>
                                    <div class="core_desc">引导用户签约，按协议主动完成扣款
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon4.png" alt=""> -->
                                    <div class="core_title">扫码支付</div>
                                    <div class="core_desc">商家扫用户付款码，或用户扫商家收款码完成支付
                                    </div>
                                </div>
                            </van-col>
                        </van-row>
                    </van-swipe-item>
                    <van-swipe-item>
                        <van-row gutter="13">
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon5.png" alt=""> -->
                                    <div class="core_title">JSAPI支付</div>
                                    <div class="core_desc">适用于微信/支付宝小程序内调用接口完成支付
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon6.png" alt=""> -->
                                    <div class="core_title">APP支付</div>
                                    <div class="core_desc">在手机应用内调用支付接口，完成付款流程
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon7.png" alt=""> -->
                                    <div class="core_title">公众号支付</div>
                                    <div class="core_desc">适用于支付宝公众号/微信公众号场景支付
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon8.png" alt=""> -->
                                    <div class="core_title">H5 支付</div>
                                    <div class="core_desc">在手机网页端唤起支付界面，完成在线支付
                                    </div>
                                </div>
                            </van-col>
                        </van-row>
                    </van-swipe-item>
                    <van-swipe-item>
                        <van-row gutter="13">
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon9.png" alt=""> -->
                                    <div class="core_title">PC 支付</div>
                                    <div class="core_desc">
                                        PC网站接入支付后，自行开发生成二维码，用户使用微信或者支付宝“扫一扫”来完成支付
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon10.png" alt=""> -->
                                    <div class="core_title">快捷支付</div>
                                    <div class="core_desc">无需开通网银，绑卡后输入支付密码等信息即可快速支付
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon11.png" alt=""> -->
                                    <div class="core_title">网银支付</div>
                                    <div class="core_desc">跳转至银行官网页面，登录账户完成支付适用于大额转账
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon12.png" alt=""> -->
                                    <div class="core_title">协议付款</div>
                                    <div class="core_desc">商用户签约，按约定自动或手动授权支付
                                    </div>
                                </div>
                            </van-col>
                        </van-row>
                    </van-swipe-item>
                    <van-swipe-item>
                        <van-row gutter="13">
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon13.png" alt=""> -->
                                    <div class="core_title">代付业务</div>
                                    <div class="core_desc">接受客户的委托代为办理指定款项的收入
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon14.png" alt=""> -->
                                    <div class="core_title">虚拟户</div>
                                    <div class="core_desc">基于虚拟账户余额或充值金额完成支付
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="core_item">
                                    <!-- <img src="../../images/product/icon15.png" alt=""> -->
                                    <div class="core_title">商家分账</div>
                                    <div class="core_desc">业务发生主体与业务关系方之间进行的相关利益和支出的划分
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <!-- <div class="core_item">
                                    <img src="../../images/product/icon8.png" alt="">
                                    <div class="core_title">H5 支付</div>
                                    <div class="core_desc">在手机网页端唤起支付界面，完成在线支付
                                    </div>
                                </div> -->
                            </van-col>
                        </van-row>
                    </van-swipe-item>
                </van-swipe>

            </div>
        </div>
        <!-- 行业解决方案 -->
        <div class="solution">
            <!-- <div class="title" style="padding-bottom: 4px;">平台安全</div> -->
            <!-- <div class="desc">稳定高效 7行代码，极速入网</div> -->
            <van-swipe class="my-swipes" :autoplay="3000" indicator-color="#006FBC">
                <van-swipe-item>
                    <div class="solution_li">
                        <div class="solution_item">
                            <!-- <img src="../../images/product/icon16.png" alt=""> -->
                            <div class="solution_content">
                                <div>技术能力</div>
                                <div>自有技术团队，开放 API/SDK 工具，快速对接商户系统缩短开发周期</div>
                            </div>
                        </div>
                        <div class="solution_item">
                            <!-- <img src="../../images/product/icon17.png" alt=""> -->
                            <div class="solution_content">
                                <div>分账能力</div>
                                <div>自动化清结算与灵活分账，适配多角色资金分润需求</div>
                            </div>
                        </div>
                        <div class="solution_item">
                            <!-- <img src="../../images/product/icon18.png" alt=""> -->
                            <div class="solution_content">
                                <div>服务能力</div>
                                <div>提供交易数据分析与 7×12 小时专属技术运营支持</div>
                            </div>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="solution_li">
                        <div class="solution_item">
                            <!-- <img src="../../images/product/icon19.png" alt=""> -->
                            <div class="solution_content">
                                <div>安全合规</div>
                                <div>信息系统安全等级防护备案，中国清算协会聚合支付备案认证</div>
                            </div>
                        </div>
                        <div class="solution_item">
                            <!-- <img src="../../images/product/icon20.png" alt=""> -->
                            <div class="solution_content">
                                <div>灵活便捷</div>
                                <div>自产品服务灵活组合，满足多行业商户需求</div>
                            </div>
                        </div>
                        <!-- <div class="solution_item">
                            <img src="../../images/product/icon18.png" alt="">
                            <div class="solution_content">
                                <div>服务能力</div>
                                <div>提供交易数据分析与 7×12 小时专属技术运营支持</div>
                            </div>
                        </div> -->
                    </div>
                </van-swipe-item>
            </van-swipe>

        </div>
        <!-- 灵活分期 -->
        <div class="flex_pay">
            <div class="title" style="padding-bottom: 28px;">0元先享，灵活分期</div>
            <!-- <img src="../../images/product/bg5.png" alt="">
            <img src="../../images/product/bg6.png" alt=""> -->
        </div>
        <!-- 商家分账 -->
        <div class="core_box">
            <div class="title">商家分账</div>
            <div class="core_li">
                <van-swipe class="my-swipes" :autoplay="3000" indicator-color="#006FBC">
                    <van-swipe-item>
                        <van-row gutter="13">
                            <van-col span="12">
                                <div class="fz">
                                    <!-- <img src="../../images/product/icon21.png" alt=""> -->
                                    <div class="pay_core">
                                        <div class="core_title">合规分账</div>
                                        <div class="core_desc">
                                            规避二清风险
                                        </div>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="fz">
                                    <!-- <img src="../../images/product/icon22.png" alt=""> -->
                                    <div class="pay_core">
                                        <div class="core_title">自动分账</div>
                                        <div class="core_desc">提升财务效率
                                        </div>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="fz">
                                    <!-- <img src="../../images/product/icon23.png" alt=""> -->
                                    <div class="pay_core">
                                        <div class="core_title">账务清晰</div>
                                        <div class="core_desc">简化税务管理
                                        </div>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="fz">
                                    <!-- <img src="../../images/product/icon24.png" alt=""> -->
                                    <div class="pay_core">
                                        <div class="core_title">灵活适配</div>
                                        <div class="core_desc">多元商业模式
                                        </div>
                                    </div>
                                </div>
                            </van-col>
                        </van-row>
                    </van-swipe-item>
                    <van-swipe-item>
                        <van-row gutter="13">
                            <van-col span="12">
                                <div class="fz">
                                    <!-- <img src="../../images/product/icon25.png" alt=""> -->
                                    <div class="pay_core">
                                        <div class="core_title">资金闭环</div>
                                        <div class="core_desc">
                                            保障交易安全
                                        </div>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="fz">
                                    <!-- <img src="../../images/product/icon26.png" alt=""> -->
                                    <div class="pay_core">
                                        <div class="core_title">分账透明</div>
                                        <div class="core_desc">增强合作信任
                                        </div>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="fz">
                                    <!-- <img src="../../images/product/icon27.png" alt=""> -->
                                    <div class="pay_core">
                                        <div class="core_title">数据沉淀</div>
                                        <div class="core_desc">驱动决策优化
                                        </div>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div class="fz">
                                    <!-- <img src="../../images/product/icon28.png" alt=""> -->
                                    <div class="pay_core">
                                        <div class="core_title">实时分账</div>
                                        <div class="core_desc">降低资金占用
                                        </div>
                                    </div>
                                </div>
                            </van-col>
                        </van-row>
                    </van-swipe-item>
                </van-swipe>

            </div>
        </div>
        <!-- 底部 -->
        <footers></footers>
    </div>
</template>
<script>
import tabbar from "@/components/tabbar";
import footers from "@/components/footer";
export default {
    name: 'home',
    components: {
        tabbar, footers
    }
}
</script>
<style scoped lang="scss">
.swipe-item {
    height: 152px;
    background: url('../../images/home/bg1.png') no-repeat center;
    background-size: cover;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 24px;
    text-align: center;
    // line-height: 152px;
    position: relative;
}

.desc {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 10px;
    color: #666666;
    text-align: center;
    margin-bottom: 18px;
}

.bg1 {
    background: url('../../images/product/bg1.png') no-repeat center;
    background-size: cover;
}

// .bg2 {
//     background: url('../../images/product/bg2.png') no-repeat center;
//     background-size: cover;
// }

// .bg3 {
//     background: url('../../images/product/bg3.png') no-repeat center;
//     background-size: cover;
// }

.bg1-text {
    width: 100%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bg2-text {
    text-align: left;
    width: 100%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}

.bg3-text {
    text-align: left;
    width: 100%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);

    div {
        font-weight: 400;
        font-size: 12px;
    }
}

.my-swipe {
    ::v-deep .van-swipe__indicator {
        width: 12px;
        height: 2px;
        border-radius: 0;
    }
}

.core_box {
    ::v-deep .van-swipe-item {
        padding-bottom: 20px;
    }

    ::v-deep .van-swipe__indicator {
        background: #D2D2D2;
    }
}

.core_box {
    background: #F6FBFE;
    padding-bottom: 10px;

    .core_li {
        padding: 0 12px;

        .core_item {
            width: 100%;
            height: 180px;
            background: #FFFFFF;
            box-shadow: 0px 0px 8px 0px rgba(158, 175, 209, 0.38);
            border-radius: 4px;
            margin-bottom: 12px;
            display: flex;
            // justify-content: center;
            flex-direction: column;
            align-items: center;
            padding: 18px 0;
            box-sizing: border-box;

            img {
                width: 52px;
            }

            .core_title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #333;
                margin-top: 10px;
                text-align: center;
            }

            .core_desc {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #666;
                margin-top: 10px;
                text-align: center;
                padding: 0 10px;
            }
        }
    }
}

.title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    // margin: 24px 0 20px 0;
    padding: 24px 0 20px 0;
    text-align: center;
}

// 平台安全
.solution {
    background: #F7FAFF;
    background-size: cover;
    padding-bottom: 14px;

    ::v-deep .van-swipe-item {
        padding-bottom: 20px;
    }

    ::v-deep .van-swipe__indicator {
        background: #D2D2D2;
    }

    .solution_li {
        padding: 0 12px;

        .solution_item {
            background: #FFFFFF;
            box-shadow: 0px 0px 8px 0px rgba(158, 175, 209, 0.38);
            border-radius: 4px;
            padding: 16px 16px 16px 12px;
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-bottom: 10px;

            img {
                width: 36px;
                height: 36px;
            }

            .solution_content {
                width: calc(100% - 36px);
                margin-left: 9px;

                div:nth-child(1) {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 14px;
                    color: #006FBC;
                }

                div:nth-child(2) {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #666666;
                    margin-top: 6px;
                }
            }
        }
    }
}

// 灵活分期
.flex_pay {
    padding: 0 12px;

    img {
        width: 100%;
        margin-bottom: 30px;
    }
}

// 支付产品
.fz {
    display: flex;
    justify-content: space-between;
    height: 72px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 0px rgba(158, 175, 209, 0.38);
    border-radius: 4px;
    margin-bottom: 12px;
    padding: 18px;
    box-sizing: border-box;

    img {
        width: 36px;
        height: 36px;
    }

    .pay_core {
        width: calc(100% - 36px);
        margin-left: 14px;

        .core_title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #006FBC;
            margin-bottom: 4px;
        }

        .core_desc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #333333;
        }
    }


}
</style>